<!--  -->
<template>
  <div>
    <van-pull-refresh v-model="pull_isLoading" @refresh="onRefresh">
    <div class="headTop flex-column">
      <div class="himg">
        <img :src="logo" alt="" />
      </div>
      <p class="f-16 f-bold">{{ name }}</p>
    </div>

    <div style="margin-top: -3.125rem;">
      <van-cell-group inset class='bg-fff'>
        <van-row class='padding-top-12 padding-bottom-12'>
          <van-col span="6" v-for="(item,index) in statistics" :key="index">
            <div class="flex-column t-c">
              <div class="f-bold f-13">{{item.value}}</div>
              <div>{{item.title}}</div>
            </div>
          </van-col>
        </van-row>
      </van-cell-group>

      <div class="bg-fff margin-12 padding-10 flex border-radius-10" style="margin: 0.4rem 0.4rem 0 0.4rem;gap: 0.8rem;display: flex; flex-wrap: wrap; justify-content: space-between;">
        <div
          class="flex-column t-c flex-j-c col-box col-bg-1"
          v-if="business_id !== 0 || (business_id && audio_add_button)"
          @click="toDigitalHuman('aiCreateVoiceClon',true,audio_add_button)" 
        >
          <img :src="`${imgPath}ai-create/ai-create-01.png`" class="icon-image" />
          <div class="f-13 ">声音克隆</div>
        </div>
        <div
          class="flex-column t-c flex-j-c col-box col-bg-2"
          v-if="business_id !== 0 || (business_id && body_add_button)"
          @click="toDigitalHuman('aiCreateDigitalHuman',true,body_add_button)" 
        >
          <img :src="`${imgPath}ai-create/ai-create-02.png`" class="icon-image" />
          <div class="f-13 ">数字分身</div>
        </div>
        <div
          class="flex-column t-c flex-j-c col-box col-bg-3"
          v-if="business_id !== 0 || (business_id && video_add_button)"
          @click="toDigitalHuman('aiCreateVideoCreation',true,video_add_button)" 
        >
          <img :src="`${imgPath}ai-create/ai-create-03.png`" class="icon-image" />
          <div class="f-13 ">数字人视频创作</div>
        </div>
        <div
          class="flex-column t-c flex-j-c col-box col-bg-3"
          v-if="business_id !== 0 || (business_id && lip_match_button)"
          @click="toDigitalHuman('aiCreateLipping',true,lip_match_button)" 
        >
          <img :src="`${imgPath}ai-create/ai-create-17.png`" class="icon-image" />
          <div class="f-13 ">唇形匹配</div>
        </div>
      </div>

      <van-tabs v-model="active" @change="onChangeTab" color="var(--themeBaseColor)" sticky background="#f5f5f5">
        <van-tab title="我的作品">
          <!-- <van-transition show="{{ showPullRefresh }}" name="slide-down">
            <div class="color-AAAAB3 margin-top-8 t-c f-13">下拉即可刷新...</div>
          </van-transition> -->
          <!-- <grid-div type="masonry" cross-axis-count="{{2}}" cross-axis-gap="{{10}}" main-axis-gap="{{8}}" padding="{{[4,10,10,10]}}"> -->
            <d-list :loading="tabArrOption ? tabArrOption[active].finished : false" :finished="tabArrOption ? tabArrOption[active].finished : false" @load="onLoad" >
              <div style="margin-top: 0.5rem;column-count: 2; gap: 10px; padding: 4px 10px 10px 10px;">
                  <div v-for="(item, index) in videoList" :key="index" class="grid-child-custom bg-fff border-radius-10 flex-column relative" v-if="!item.hidden">
                    <template v-if="!item.hidden">
                      <div class="relative img-bg" style="min-height: 12rem;display: flex;align-items: center;">
                        <img v-if="item.cover_img" :src="item.cover_img" style="width: 100%;" />
                        <video v-else :src="item.url" :style="{'width': '100%', 'height': item.url ? '100%' : '15rem'}" class="w_h_100" />
                      <div v-if="item.lip" class="flex-column flex-a-c flex-j-c block-center" :class="item.lip ? 'createStatusBlock':''">
                        <div v-if="item.lip.status == 0 " style="display: flex;flex-direction: column;align-items: center;">
                          <img :src="`${imgPath}ai-create/ai-create-14.gif`" mode="widthFix" style="width: 1.5rem;" />
                          <div>唇形匹配中</div>
                        </div>
                        <div v-if="item.lip.status == 2">
                          <i class="iconfont icon-tishi2"></i>
                          <div>创作失败</div>
                        </div>
                        <div v-if="item.lip.status == 1">
                          <i @click="onPreviewVideo(item.url)"  class="iconfont icon-fabushipin f-40" style="text-shadow: #666666 0.025rem 0 0.25rem;"></i>
                        </div>
                      </div>


                        <div v-else class="flex-column flex-a-c flex-j-c block-center" :class="{ createStatusBlock: item.status == 0 || item.status == 2 }">
                          <template v-if="item.status == 0">
                            <img :src="`${imgPath}ai-create/ai-create-14.gif`" style="width: 35px;" />
                            <div>创作中</div>
                          </template>
                          <template v-if="item.status == 2">
                            <i class="iconfont icon-tishi2"></i>
                            <div>创作失败</div>
                          </template>
                          <template v-if="item.status == 1">
                            <i @click="onPreviewVideo(item.url)" class="iconfont icon-fabushipin f-40" style="text-shadow: #666666 1px 0 10px;"></i>
                          </template>
                        </div>
                        <div class="absolute yichunxingpipei t-c" v-if="item.is_lip_video">
                          <i class="iconfont icon-yichunxingpipei"></i>
                        </div>
                      </div>
                      <div class="f-grow-1"></div>
                      <div class="padding-10">
                        <div class="flex relative">
                          <div class="f-15 color-00001C f-grow-1 line-clamp-2 t-l" style="line-height: 1rem;">{{ item.name }}</div>
                          <i v-if="item.has_operate && (!item.lip || (item.lip && item.lip.status != 0))" @click="onClickVal('activePopover', index)" class="iconfont icon-all_more padding-left-6 color-AAAAB3"></i>
                        </div>
                        <div class="flex-a-c margin-top-4" v-if="item.member">
                          <img :src="item.member ? item.member.avatar : ''" class="min-img" />
                          <div class="padding-left-6 f-12 color-AAAAB3">{{ item.member ?item.member.nickname : ''}}</div>
                        </div>

                        <template v-if="active == 0 && activePopover == index">
                          <div class="popover-group flex-column flex-a-c flex-j-c absolute t-l" @click="onClickVal('activePopover', null)">
                            <van-cell class="popover-group-cell" title="重命名" icon="edit" clickable @click="onClickResetName(item.id, index, 'video')" />
                            <van-cell class="popover-group-cell" title="唇形匹配" icon="iconfont icon-Icon_mouth" clickable  v-if="item.has_lip_match" @click="onClickLip(item.duration,item.body,item.id)" >
                              <template #icon>
                                <i class="iconfont icon-Icon_mouth f-12 margin-right-4" style="margin-right: 0.2rem;"></i>
                              </template>
                            </van-cell>
                            <van-cell class="popover-group-cell" title="播放原视频" icon="play-circle-o" clickable @click="onPreviewVideo(item.origin_video_url)" v-if="item.origin_video_url"/>
                              <!-- <van-cell wx:if="{{item.origin_video_url}}" custom-class='popover-group-cell' title="播放原视频" icon="play-circle-o" clickable bind:click="onPreviewVideo" data-url="{{item.origin_video_url}}" /> -->
                            <van-cell class="popover-group-cell" title="保存视频" icon="down" clickable @click="beforeSaveVideo(item.url)"  />
                            <van-cell class="popover-group-cell" title="发布视频" icon="video-o" clickable @click="toReleaseVideo(item)"/>
                            <!-- <van-cell class='popover-group-cell' title="发布抖音" icon="music-o" clickable /> -->
                            <van-cell class="popover-group-cell" title="删除" icon="delete-o" clickable @click="onClickDelete(item.id, index, 'video')" />
                          </div>
                          <van-overlay class="absolute" :show="true" />
                        </template>
                      </div>
                    </template>
                  </div>
              </div>
            </d-list>

          <!-- </grid-div> -->

          <van-empty image="search" v-if="videoList.length == 0" description="暂无作品" />
        </van-tab>
        <van-tab title="数字分身">
          <!-- <grid-div type="masonry" cross-axis-count="{{2}}" cross-axis-gap="{{10}}" main-axis-gap="{{8}}" padding="{{[4,10,10,10]}}"> -->
          <d-list :loading="tabArrOption ? tabArrOption[active].finished : false" :finished="tabArrOption ? tabArrOption[active].finished : false" @load="onLoad" >
            <div style="margin-top: 0.5rem;column-count: 2; gap: 10px; padding: 4px 10px 10px 10px;">
                <div v-for="(item, index) in bodyList" :key="index" class="grid-child-custom bg-fff border-radius-10 relative">
                  <template v-if="!item.hidden">
                    <div class="relative img-bg" style="min-height: 12rem;display: flex;align-items: center;">
                      <img v-if="item.cover_img" :src="item.cover_img" alt="" style="width: 100%;" />
                      <video v-else :src="item.url" style="width: 100%;" class="w_h_100" />
                      <div class="flex-column flex-a-c flex-j-c block-center">
                        <i @click.stop="onPreviewVideo(item.url)" class="iconfont icon-fabushipin f-40" style="text-shadow: #666666 1px 0 10px;"></i>
                      </div>
                    </div>
                    <div class="padding-10 t-l">
                      <div class="flex relative">
                        <div class="f-15 color-00001C f-grow-1 line-clamp-2" style="line-height: 1rem;">{{ item.name }}</div>
                        <i @click.stop="onClickVal('activePopover', index)" class="iconfont icon-all_more padding-left-6 color-AAAAB3"></i>
                      </div>
                      <div class="flex-a-c margin-top-8" v-if="item.member">
                        <img :src="item.member.avater" class="min-img" />
                        <div class="padding-left-6 f-12 color-AAAAB3">{{ item.member.nickname }}</div>
                      </div>
                    </div>

                    <template v-if="active == 1 && activePopover == index">
                      <div class="popover-group flex-column flex-a-c flex-j-c absolute t-l" @click.stop="onClickVal('activePopover', null)">
                        <van-cell class="popover-group-cell" title="重命名" icon="edit" clickable @click="onClickResetName(item.id, index, 'body')" />
                        <van-cell v-if="body_edit_refer_img" class='popover-group-cell' title="编辑参考图" clickable @click="onEditorReferImg(item)" >
                          <template #icon>
                            <i class="iconfont icon-xiugaitupian f-12 margin-right-4" style="margin-right: 0.2rem;"></i>
                          </template>
                        </van-cell>

                        <van-cell
                          class="popover-group-cell"
                          title="创作视频"
                          icon="brush-o"
                          @click.stop="toUrl('aiCreateVideoCreation', {} , {body_id:item.id ,  business_id: item.business_id || 0 })"
                        />
                        <van-cell class="popover-group-cell" title="删除" icon="delete-o" clickable @click="onClickDelete(item.id, index, 'body')" />
                      </div>
                      <van-overlay class="absolute" :show="true" />
                    </template>
                  </template>
                </div>
            </div>
          </d-list>

          <!-- </grid-div> -->

          <van-empty image="search" v-if="bodyList.length == 0" description="暂无分身" />
        </van-tab>
        <van-tab title="声音克隆">
          <div class="voice-clone-tab">
            <span :class="audio_type === 0 ? 'clone-tabs active-clone-tabs' : 'clone-tabs'" @click="clickAudioType(0)">声音克隆({{audio_sjt_count}})</span>
            <span :class="audio_type === 1 ? 'clone-tabs active-clone-tabs' : 'clone-tabs'"  @click="clickAudioType(1)">声音克隆CV版({{audio_cv_count}})</span>
          </div>
          <d-list :loading="tabArrOption ? tabArrOption[active].finished : false" :finished="tabArrOption ? tabArrOption[active].finished : false" @load="onLoad" >
            <div style="margin: 0.5rem 0.75rem 0 0.75rem;">
                <div v-for="(item, index) in audioList" :key="index" class="flex padding-10 bg-fff border-radius-10 relative" style="margin-bottom: 0.625rem;">
                  <div class="border-radius-10 audio-block-bg flex-a-c flex-j-c relative">
                    <img :src="`${imgPath}ai-create/ai-create-04.png`" style="width: 60px;" />
                    <div class="flex-column flex-a-c flex-j-c block-center createStatusBlock" v-if="item.status == 0 || item.status == 2">
                      <template v-if="item.status == 0">
                        <div>创作中</div>
                      </template>
                      <template v-if="item.status == 2">
                        <i class="iconfont icon-tishi2"></i>
                        <div>创作失败</div>
                      </template>
                    </div>
                  </div>
                  <div class="f-grow-1 padding-left-6 flex-column">
                    <div class="f-15 color-00001C t-l" style="line-height: 1rem;">{{ item.name }}</div>

                    <div class="sex-tag flex-a-c margin-top-8 f-11">
                      <div class="sex-icon">
                        <i class="iconfont icon-nan"></i>
                      </div>
                      {{ item.sex }}声
                    </div>

                    <div class="flex-a-c margin-top-8" v-if="item.member">
                      <img :src="item.member.avater" class="min-img" />
                      <div class="padding-left-6 f-12 color-AAAAB3">{{ item.member.nickname }}</div>
                    </div>
                  </div>

                  <div class="relative" v-if="item.status == 1">
                    <i @click.stop="onClickVal('activePopover', index)" class="iconfont icon-all_more padding-left-6 color-AAAAB3"></i>
                  </div>

                  <template v-if="active == 2 && activePopover == index">
                    <div class="popover-group flex-column flex-a-c flex-j-c absolute" @click.stop="onClickVal('activePopover', null)">
                      <van-cell class="popover-group-cell" title="重命名" icon="edit" clickable @click.stop="onClickResetName(item.id, index, 'audio')" />
                      <van-cell class="popover-group-cell" title="删除" icon="delete-o" clickable @click.stop="onClickDelete(item.id, index, 'audio')" />
                    </div>
                    <van-overlay class="absolute" :show="true" />
                  </template>
                </div>
              <van-empty image="search" v-if="audioList.length == 0" description="暂无声音数据" />
            </div>
          </d-list>
        </van-tab>
        <van-tab title="唇形匹配">
            <d-list :loading="tabArrOption ? tabArrOption[active].finished : false" :finished="tabArrOption ? tabArrOption[active].finished : false" @load="onLoad" >
              <div style="margin-top: 0.5rem;column-count: 2; gap: 10px; padding: 4px 10px 10px 10px;">
                  <div v-for="(item, index) in libList" :key="index" class="grid-child-custom bg-fff border-radius-10 flex-column relative" v-if="!item.hidden">
                    <template v-if="!item.hidden">
                      <div class="relative img-bg" style="min-height: 12rem;display: flex;align-items: center;">
                        <img v-if="item.cover_img" :src="item.cover_img" style="width: 100%;" />
                        <video v-else :src="item.url" :style="{'width': '100%', 'height': item.url ? '100%' : '15rem'}" class="w_h_100" />

                      <div v-if="item.lip" class="flex-column flex-a-c flex-j-c block-center" :class="item.lip ? 'createStatusBlock':''">
                        <div v-if="item.lip.status == 0 " style="display: flex;flex-direction: column;align-items: center;">
                          <img :src="`${imgPath}ai-create/ai-create-14.gif`" mode="widthFix" style="width: 1.5rem;" />
                          <div>唇形匹配中</div>
                        </div>
                        <div v-if="item.lip.status == 2">
                          <i class="iconfont icon-tishi2"></i>
                          <div>唇形匹配失败</div>
                        </div>
                        <div v-if="item.lip.status == 1">
                          <i @click="onPreviewVideo(item.url)"  class="iconfont icon-fabushipin f-40" style="text-shadow: #666666 0.025rem 0 0.25rem;"></i>
                        </div>
                      </div>
                      <div class="absolute yichunxingpipei t-c" v-if="item.is_lip_video">
                        <i class="iconfont icon-yichunxingpipei"></i>
                      </div>
                      </div>
                      <div class="f-grow-1"></div>
                      <div class="padding-10">
                        <div class="flex relative">
                          <div class="f-15 color-00001C f-grow-1 line-clamp-2 t-l" style="line-height: 1rem;">{{ item.name }}</div>
                          <i v-if="item.has_operate && (!item.lip || (item.lip && item.lip.status != 0))" @click="onClickVal('activePopover', index)" class="iconfont icon-all_more padding-left-6 color-AAAAB3"></i>
                        </div>
                        <div class="flex-a-c margin-top-4" v-if="item.member">
                          <img :src="item.member ? item.member.avatar : ''" class="min-img" />
                          <div class="padding-left-6 f-12 color-AAAAB3">{{ item.member ?item.member.nickname : ''}}</div>
                        </div>

                        <template v-if="active == 3 && activePopover == index">
                          <div class="popover-group flex-column flex-a-c flex-j-c absolute t-l" @click="onClickVal('activePopover', null)">
                            <van-cell class="popover-group-cell" title="重命名" icon="edit" clickable @click="onClickResetName(item.id, index, 'lib')" />
                            <van-cell class="popover-group-cell" title="唇形匹配" icon="iconfont icon-Icon_mouth" clickable  v-if="item.has_lip_match" @click="onClickLip(item.duration,item.body,item.id)" >
                              <template #icon>
                                <i class="iconfont icon-Icon_mouth f-12 margin-right-4" style="margin-right: 0.2rem;"></i>
                              </template>
                            </van-cell>
                            <van-cell class="popover-group-cell" title="播放原视频" icon="play-circle-o" clickable @click="onPreviewVideo(item.origin_video_url)" v-if="item.origin_video_url"/>
                              <!-- <van-cell wx:if="{{item.origin_video_url}}" custom-class='popover-group-cell' title="播放原视频" icon="play-circle-o" clickable bind:click="onPreviewVideo" data-url="{{item.origin_video_url}}" /> -->
                            <van-cell class="popover-group-cell" title="保存视频" icon="down" clickable @click="beforeSaveVideo(item.url)"  />
                            <van-cell class="popover-group-cell" title="发布视频" icon="video-o" clickable @click="toReleaseVideo(item)"/>
                            <!-- <van-cell class='popover-group-cell' title="发布抖音" icon="music-o" clickable /> -->
                            <van-cell class="popover-group-cell" title="删除" icon="delete-o" clickable @click="onClickDelete(item.id, index, 'lip')" />
                          </div>
                          <van-overlay class="absolute" :show="true" />
                        </template>
                      </div>
                    </template>
                  </div>
              </div>
            </d-list>

          <!-- </grid-div> -->

          <van-empty image="search" v-if="libList.length == 0" description="暂无作品" />
        </van-tab>
      </van-tabs>
    </div>

    <van-dialog use-slot title="提示" v-model="showDialog"  confirm-button-color='var(--themeBaseColor)' show-cancel-button @confirm='onconfirmLip' confirm-button-text='确认匹配' >
      <div class="margin-12" style="text-align: left; padding: 1rem;">
        <div>{{form_tip.tip}}
          <div class="themeColor">注：如需更改正脸参考图，请先在数字分身列表进行修改，再进行唇形匹配</div>
        </div>
      </div>
    </van-dialog>
    <van-dialog use-slot title="提示" v-model="showDialogUnReferImg" confirm-button-text='去上传' cancel-button-text='不上传且匹配'   @cancel="submitLip"  @confirm='onClickVal("showDigital",true)' confirm-button-color='var(--themeBaseColor)'>
      <div class="margin-12" style="text-align: left; padding: 1rem;">
        <div><span class="themeColor">数字分身未上传正脸参考图！</span>若不上传人脸参考图，默认将选择视频中第一个有人脸的画面中，人脸占比最大的人物为目标，导致唇形匹配有误差，请确认是否去上传！。
          <div class="themeColor">{{form_tip.tip}}</div>
        </div>
      </div>
    </van-dialog>
    <van-popup v-model="showDigital"  class="pop-base-class" position="bottom" round style="background-color: #F5F5F5;" closeable @close="onClickVal('showDigital',false)" >
      <div class="pop-base-title">请编辑-正脸参考图</div>
      <div class="pop-base-content" style="padding: 0;text-align: left;">
        <van-cell-group inset>
          <van-cell title="分身名称" :value="lip_duration_unused_body ? lip_duration_unused_body.name : ''" />
          <van-cell title="数字分身" use-label-slot :border="false">
            <div slot="label">
              <div style="display: block;">
                <video :src="lip_duration_unused_body ? lip_duration_unused_body.url : ''" style="height: 2rem; width: 2rem;" />
              </div>
            </div>
          </van-cell>
          <van-cell title="正脸参考图" :border="false" use-label-slot>
            <div slot="label">
              <div style="display: block;">
                <van-uploader v-model="bodyReferImg" accept="image/jpeg, image/jpg, image/png, image/bmp, image/webp" use-before-read max-count="1"  :before-read="beforeReadReferImg" :after-read="uploadImageReferImg" :delete="onDelete"></van-uploader>
              </div>
              <div>
                图片要求：
              </div>
              <div>文件大小：小于等于10MB</div>
              <div>图像大小：长宽比小于等于 2，最大边长小于等 4096</div>
              <div>格式：jpeg、jpg、png、bmp、webp</div>
            </div>
          </van-cell>

        </van-cell-group>
      </div>
      <div class="pop-base-bottom">
        <van-button :disabled='!bodyReferImg || !bodyReferImg.length' @click="submitUploadReferImg" round color="var(--themeBaseColor)" type="danger" block >确认并提交</van-button>
      </div>
    </van-popup>
  
    <van-popup v-model="showResetName" class="pop-base-class" position="bottom" round style="background-color: #F5F5F5;" closeable>
      <div class="pop-base-title">{{ ResetNameInfo.text }}重命名</div>
      <div class="pop-base-content">
        <van-cell-group inset>
          <van-field v-model="resetNewName" placeholder="请输入新的名称" :border="false" />
        </van-cell-group>
      </div>
      <div class="pop-base-bottom">
        <van-button @click.stop="submitResetName" round color="var(--themeBaseColor)" type="danger" block style="height: 40px;">确认修改</van-button>
      </div>
    </van-popup>
    <van-popup v-model="previewMedia" position="center" round style="background-color: #000;width: 100%;" @close="oncloseMedia">
      <video :src="previewMediaUrl" controls style="width: 100%;"></video>
    </van-popup>
    </van-pull-refresh>
  </div>
</template>

<script>
import DList from "@/components/dlist";
export default {
  data() {
    return {
      imgPath: "",
      business_id: 0,
      activePopover: null,
      showPullRefresh: true,

      showoverlay: true,
      resetNewName: null,
      active: 0,
      list: [],
      showResetName: false,

      videoList: [],
      bodyList: [],
      audioList: [],
      libList: [],
      ResetNameInfo: {},
      previewMedia: false,
      previewMediaUrl: "",
      showDialogUnReferImg: false,
      showDialog: false,
      showDigital: false,
      bodyReferImg: [],
      pull_isLoading: false,
      audio_type: 0,
      audio_cv_count: 0,
      audio_sjt_count: 0,
      form_tip: {} 
    };
  },

  activated() {
    this.business_id = this.$route.query.business_id || 0;
    this.active =  this.$route.params.tab || 0;
    this.previewMedia = false;
    this.getData();
    this.getAudioCount();
    this.getInterestsTip();
  },

  components: {DList},

  computed: {},

  mounted() {},

  methods: {
    onRefresh() {
      this.pull_isLoading = true;
      this[this.tabArrOption[this.active]["listName"]] = [];
      this.init();
    },
    onLoad() {
      this.getTabsList();
    },
    async getData() {
      let { result, msg, data } = await $http.get(
        "plugin.ai-create.frontend.controllers.center.manage",
        {
          business_id: this.business_id || 0
        },
        "."
      );
      if (result == 0) return this.$toast(msg);
      this.imgPath = this.$store.state.imgPath;
      this.init();
      Object.assign(this, data);
    },

    init() {
      this.tabArrOption = [
        {
          name: "作品",
          url: "plugin.ai-create.frontend.controllers.video.index",
          page: 1,
          finished: false,
          listName: "videoList"
        },
        {
          name: "数字分身",
          url: "plugin.ai-create.frontend.controllers.body.index",
          page: 1,
          finished: false,
          listName: "bodyList"
        },
        {
          name: "声音克隆",
          url: "plugin.ai-create.frontend.controllers.audio.index",
          page: 1,
          finished: false,
          listName: "audioList"
        },
        {
          name: "唇形匹配",
          url: "plugin.ai-create.frontend.controllers.video.lip-video",
          page: 1,
          finished: false,
          listName: "libList"
        }
      ];
      if( this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
      this.videoList = [];
      this.bodyList = [];
      this.audioList = [];
      this.libList = [];
      this.getTabsList({ refresh: true });
    },
    onClickVal(name, val) {
      this[name] = val;
    },
    async getTabsList({ refresh = false } = {}) {
      let index = this.active;
      let activeTabInfo = this.tabArrOption[index];
      // if(refresh) this.data[activeTabInfo.listName] = []; //重置列表对应的data数据
      if (activeTabInfo.finished) return; //没有更多
      let { result, msg, data } = await $http.get(
        activeTabInfo.url,
        {
          business_id: this.business_id || 0,
          page: activeTabInfo.page,
          audio_type: this.audio_type
        },
        "."
      );
      if (result == 0) return this.$toast(msg);
       // 添加轮询请求数据
      if(!this.timer) {
        this.timer = setInterval(() => {
          let newArrStatus =  this[this.tabArrOption[this.active]["listName"]].filter(item => (item.lip && item.lip.status == 0) || (item.status == 0))
          this.getStatus(newArrStatus)
        }, 10000);
      }
      this.loading = false;
      this.pull_isLoading = false;
      this.total = data.data.total;

      let _list = this[activeTabInfo.listName] || [];
      this[activeTabInfo.listName] = _list.concat(data.data);

      if (data.current_page == data.last_page) {
        return (this.tabArrOption[index].finished = true);
      }
      this.tabArrOption[index].page += 1;
    },
    // 查询视频状态
    async getStatus(newArrStatus) {
      let { result, msg, data } = await $http.get(
        "plugin.ai-create.frontend.controllers.video.index.get-status",
        {
          ids : newArrStatus.map(item => item.id)
        },
      );
      if (result == 0) return this.$toast(msg);
      const newArrVideoList = this.replaceObjectsById(data,this[this.tabArrOption[this.active]["listName"]])
      this.$set(this, this.tabArrOption[this.active]["listName"], newArrVideoList)
      this.$forceUpdate();
    },
    replaceObjectsById(sourceArray, targetArray) {
        // 遍历源数组中的每个对象
        sourceArray.forEach(sourceObj => {
            // 在目标数组中查找具有相同 id 的对象的索引
            const index = targetArray.findIndex(targetObj => targetObj.id === sourceObj.id);
            // 如果找到匹配的 id
            if (index!== -1) {
                // 用源数组中的对象替换目标数组中对应的对象
                targetArray[index] = sourceObj;
            }
        });
        return targetArray;
    },
    onChangeTab() {
      this.activePopover = null;
      let activeTabInfo = this.tabArrOption[this.active];
      let _data = this[activeTabInfo.listName] || [];
      if (!_data.length) this.getTabsList();
    },
    onClickResetName(id, index, listtype) {
      let _apiObj = {
        video: {
          api: "plugin.ai-create.frontend.controllers.video.index.rename",
          list: "videoList",
          text: "作品"
        },
        body: {
          api: "plugin.ai-create.frontend.controllers.body.index.rename",
          list: "bodyList",
          text: "数字分身"
        },
        audio: {
          api: "plugin.ai-create.frontend.controllers.audio.index.rename",
          list: "audioList",
          text: "声音"
        },
        lib: {
          api: "plugin.ai-create.frontend.controllers.video.lip-video.rename",
          list: "libList",
          text: "唇形匹配"
        }
      };
      let _ResetNameInfo = _apiObj[listtype];
      _ResetNameInfo.id = id;
      _ResetNameInfo.index = index;
      this.activePopover = null;
      this.ResetNameInfo = _ResetNameInfo;
      this.showResetName = true;
    },
    async submitResetName() {
      if (!this.resetNewName) {
        app.tips("请填写新的名称");
        return;
      }
      let { result, msg, data } = await $http.get(
        this.ResetNameInfo.api,
        {
          business_id: this.business_id || 0,
          name: this.resetNewName,
          id: this.ResetNameInfo.id
        }
      );
      if (result == 0) return this.$toast(msg);
      console.log(this.ResetNameInfo,'listlist');
      this[this.ResetNameInfo.list][this.ResetNameInfo.index].name = this.resetNewName,
      this.showResetName = false;
      this.resetNewName = null;
    },
    toUrl(name, params = {}, query = {}) {
      if (!name) return;
      this.$router.push(this.fun.getUrl(name, params, query));
    },
    onClickDelete(id, index, listtype) {
      let _apiObj = {
        video: {
          api: "plugin.ai-create.frontend.controllers.video.index.delete",
          list: "videoList",
          text: "作品"
        },
        body: {
          api: "plugin.ai-create.frontend.controllers.body.index.delete",
          list: "bodyList",
          text: "分身"
        },
        audio: {
          api: "plugin.ai-create.frontend.controllers.audio.index.delete",
          list: "audioList",
          text: "声音"
        },
        lip: {
          api: "plugin.ai-create.frontend.controllers.video.lip-video.delete",
          list: "libList",
          text: "唇形匹配"
        },
      };
      this.delInfo = _apiObj[listtype];
      this.delInfo.id = id;
      this.delInfo.index = index;
      this.activePopover = null;
      this.$dialog
        .confirm({
          title: "提示",
          message: "确定删除该" + this.delInfo.text
        })
        .then(() => {
          this.submitDelList();
        });
    },
    async submitDelList() {
      let { result, msg, data } = await $http.get(
        this.delInfo.api,
        {
          business_id: this.business_id || 0,
          id: this.delInfo.id
        },
        "."
      );
      if (result == 0) return this.$toast(msg);
      this.$set(this[this.delInfo.list][this.delInfo.index], "hidden", true)
    },
    onPreviewVideo(url) {
      this.previewMediaUrl = url;
      this.previewMedia = true;
    },
    oncloseMedia(){
      this.previewMedia = false;
      this.previewMediaUrl = '';
    },
    toReleaseVideo(item) {
      sessionStorage.setItem("shareVideoPath", JSON.stringify({
        videoUrl: item.url
      }));
      this.$router.push(this.fun.getUrl("releaseVideo"));
    },
    beforeSaveVideo(url) {
      //借用a标签实现同样效果
      const link = document.createElement('a')
      link.href = url // 文件地址
      link.click();
    },
    toDigitalHuman(path,beforeread,beforereadval) {
      if (beforeread && !beforereadval) {
        this.$toast("当前暂无创作次数，需购买相关权益");
        return;
      }
      this.$router.push(this.fun.getUrl(path, {}, { business_id: this.business_id }));
    },
    // 嘴唇
    onconfirmLip() {
      if(!this.lip_duration_unused_body.refer_img) {
        // 分身的正脸参考图为空
        this.showDialogUnReferImg = true
        return;
      }
      this.submitLip();
    },
    async submitLip(){
      let _form = {
        video_id: this.lip_duration_unused_video_id
      }
      let  { result, msg, data }  = await $http.post(
        "plugin.ai-create.frontend.controllers.create.video.lip-match",
        {
          business_id: this.business_id || 0,
          form: _form
        },
        "."
      );
      this.$dialog.alert({
        title: '提示',
        message: '提交匹配' + msg,
      }).then(() => {
        // on close
      });
      this.init();
      this.lip_duration_unused_video_id = null;
      this.showDialogUnReferImg = false
    },
      // 前置校验方法
    async beforeReadReferImg (event) {
      return new Promise((resolve, reject) => {
        if (event.size > 10 * 1024 * 1024) {
          this.$toast('文件不能超过10MB');
          reject();
        } else {
          resolve();
        }
      });
    },
      // 上传文件
    uploadImageReferImg(file) {
      console.log(file,'filefile');

      const img = new Image();
      img.src = file.content;
      img.onload = () => {
        const ratio = Math.max(
          img.width / img.height,
          img.height / img.width
        )
        if (ratio > 2) {
          this.$toast('图片长宽比不能超过2:1')
          this.bodyReferImg = []
          return false
        }
        
        if (img.width > 4096 || img.height > 4096) {
          this.$toast('图片最大边长不能超过4096px')
          this.bodyReferImg = []
          return false
        }

        let uploadLoading = this.$toast.loading({
          message: "上传中",
          duration: 0
        });

        let fd = new FormData();
        fd.append("file", file.file);

        axios
          .post(this.fun.getRealUrl("upload.uploadPic"), fd, {
            headers: { "Content-Type": "multipart/form-data" }
          })
          .then(
            ({data}) => {
              console.log(data,'datadata',data.result);
              if (data.result == 1) {
                this.refer_img = data.data.img_url;
              } else {
                this.bodyReferImg = []
              }
              uploadLoading.clear();
            }
          )
          .catch(() => {
            this.$toast('上传失败')
            uploadLoading.clear();
          });

        console.log(ratio,'ratioratioratio');
      };
    },
    // 删除文件
    onDelete() {
      this.bodyReferImg = []
    },
    async submitUploadReferImg() {
      if (!this.bodyReferImg.length) {
        this.$toast('请先上传正脸参考图');
        return;
      }
      let  { result, msg, data }  = await $http.post(
        "plugin.ai-create.frontend.controllers.create.body-clone.upload-refer-img",
        {
          business_id: this.business_id || 0,
          refer_img: this.refer_img,
          id: this.lip_duration_unused_body.id
        },
        "."
      );
      this.$toast('编辑正脸参考图'+msg);
      if (!result) return;
      this['lip_duration_unused_body.refer_img'] = this.refer_img;
      console.log(result, msg, data ,this['lip_duration_unused_body.refer_img']);
      this.showDigital = false;
      this.showDialog = this.lip_duration_unused_video_id?true: false
    },
    onClickLip(duration, body, vid){
      if(!this.form_tip.has_available) {
        this.$dialog.confirm({
          title: '提示',
          message: '您的唇形匹配权益不足，无法进行匹配，请先进行充值！',
          confirmButtonText: '去充值'
        })
          .then(() => {
            this.$router.push(this.fun.getUrl("searchAll", "", {plugin_id: 198 }));
          })
          .catch(() => {
            // on cancel
          });
        return;
      }
      console.log(body,'bodybody');
      this.lip_duration_unused_item = duration;
      this.lip_duration_unused_body = body;
      this.lip_duration_unused_video_id = vid;
      this.showDialog = true;
    },
    onEditorReferImg(body){
      this.bodyReferImg = body.refer_img?[{
        url: body.refer_img
      }]:[];
      this.refer_img = body.refer_img;
      this.lip_duration_unused_body = body;
      this.bodyReferImg = this.bodyReferImg
      this.showDigital = true
    },
    clickAudioType(audio_type) {
      this.audio_type = audio_type;
      this.init();
    },
    async getAudioCount(){
      let { result, msg, data } = await $http.post(
        "plugin.ai-create.frontend.controllers.audio.index.get-audio-count",
        {
          business_id: this.business_id || 0,
        },
        "."
      );
      if (!result) return;
      this.audio_cv_count = data.audio_cv_count
      this.audio_sjt_count = data.audio_sjt_count
    },
  },
  deactivated() {
    if( this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
  async getInterestsTip() {
    let { result, msg, data } = await $http.get(
      "plugin.ai-create.frontend.controllers.center.index.get-Interests-tip",
      {
        business_id: this.$route.query.business_id || 0,
        interests_type: 6
      },
      "."
    );
    if (result == 0) return this.$toast(msg);
    this.form_tip = data;
    console.log(result, msg, data,2222,this.form_tip)
  },
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.pop-base-title {
  margin: 18px 12px 12px !important;
  font-size: 1rem !important;
  font-weight: bold !important;
  text-align: left !important;
}
.pop-base-class .pop-base-content {
  min-height: 39vh;
  max-height: 60vh;
  overflow: scroll;
  padding: 0 0.75rem 3.75rem;
}
.pop-base-class .pop-base-bottom {
  padding: 0.625rem 0.875rem;
  background: #ffffff;
}
.color-00001C {
  color: #00001c;
}
.color-AAAAB3 {
  color: #aaaab3;
}

.bg-fff {
  background-color: #ffffff;
}
.f-13 {
  margin-bottom: 0.3rem;
}
.border-radius-10 {
  border-radius: 0.625rem;
  overflow: hidden;
  margin-bottom: 0.6rem;
}

.m-t-10 {
  margin-top: 0.625rem !important;
}

.padding-10 {
  padding: 0.625rem;
}

.padding-12 {
  padding: 0.75rem;
}

.padding-top-12 {
  padding-top: 0.75rem;
}

.padding-bottom-12 {
  padding-bottom: 0.75rem;
}

.padding-left-6 {
  padding-left: 0.375rem;
}
.img-bg {
  background: #000;
}
.headTop {
  padding: 1.5rem 0.75rem 4.6875rem;
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--themeBaseColor)), to(#f5f5f5));
  background-image: -webkit-linear-gradient(var(--themeBaseColor), #f5f5f5);
  background-image: linear-gradient(var(--themeBaseColor), #f5f5f5);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.headTop .himg {
  width: 3.4375rem;
  height: 3.4375rem;
  border-radius: 100%;
  border: 2px solid #ffffff;
  margin: 0 auto;
}

.headTop .himg img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}

.col-box {
  height: 4rem;
  box-shadow: inset 0px 2 5px 1px rgba(255, 255, 255, 0.3);
  border-radius: 1rem;
  color: #fff;
  flex: 1 1 calc(50% - 0.8rem);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.col-box:last-child {
  margin: 0;
}

.col-bg-1 {
  background: linear-gradient(180deg, #005bdc 0%, #6ba8ff 100%);
}

.col-bg-2 {
  background: linear-gradient(180deg, #007adf 0%, #65b9ff 100%);
}

.col-bg-3 {
  background: linear-gradient(180deg, #2752ff 0%, #7791f8 100%);
}

.grid-child-custom {
  overflow: hidden;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute !important;
}
.block-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 56px;
  color: #ffffff;
}
.createStatusBlock {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px 10px 10px 10px;
}
img {
  display: block;
  margin: 0;
}

.min-img {
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid #d6d6dc;
  border-radius: 0.625rem;
}

.sex-tag {
  width: 56px;
  height: 20px;
  background: #e5eefe;
  border: 1px solid #e5eefe;
  border-radius: 10px 10px 10px 10px;
}
.sex-icon {
  width: 23px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  background: #ffffff;
  border-radius: 9px 9px 9px 9px;
  margin-right: 4px;
}

.sex-icon .iconfont {
  width: 15px;
  height: 15px;
  background: #015ef5;
  color: #ffffff;
  border-radius: 9px 9px 9px 9px;
}
.popover-group-cell {
  width: 7.5rem !important;
  padding: 4px 16px !important;
  border-radius: 16px !important;
  margin-bottom: 10px;
}
.popover-group {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  flex-wrap: wrap;
}
.icon-image {
  width: 50px;
}
.audio-block-bg {
  width: 80px;
  height: 80px;
  background: linear-gradient(57deg, #e3edff 0%, #eae6ff 61%, #e3f4ff 100%);
  border-radius: 12px 12px 12px 12px;
}
.margin-12 {
  padding: 0.8rem;
  line-height: 2;
}
.yichunxingpipei {
  right: 0;
  top: 0;
  width: 2rem;
  line-height: 1.5rem;
  height: 1.5rem;
  background: linear-gradient( 330deg, #F98D20 0%, #FF112A 55%, #FF178B 100%);
  border-radius: 0px 0.4rem 0px 0.4rem;
  color: #fff;
}

.voice-clone-tab {
  margin: 0.9rem 0.75rem 0.6rem;
  display: flex;
}
.clone-tabs {
  font-size: 0.9375rem;
  color: #00001C;
  background: #FFFFFF;
  border-radius: 0.5rem;
  padding: 0.36rem 0.7rem;
  margin-right: 1rem;
  font-weight: 500;
}
.active-clone-tabs {
  background: #DCE5F5;
  color: #015EF5;
}
</style>
